<template>
	<view>
		<!-- 头部 -->
		<yHeader :current="2" :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>
		<!-- PC端适配 -->
		<view v-if="screenWidth > 480" class="__inner">
			<view class="contentrow">
				<view class="label-recommend"> 热门推荐 </view>
				<view class="sub-row">
					<view v-for="(item, index) in category" @click="SwitchVariety(index, item.Category_SerialNumber)"
						:key="index" :class="Variety == index ? 'sub text-' + ThemeColors : 'sub'"
						style="cursor: pointer">
						{{ item.Category_Name }}
					</view>
				</view>
			</view>
			<view class="cont">
				<yTable :loading="loading" @row-click="handleDetail" @limitval="limitval" @pageval="pageval"
					:page="form.page" :limit="form.limit" :total="total" :tableData="tableData" style="width: 1800rpx">
					<el-table-column align="center" label="商品图片">
						<template v-slot="{ row }">
							<view class="w-100 text-ellipsis flex align-center justify-center position-relative"
								:title="row.Article_Name">
								<!--  -->
								<!-- <view class="flex bg-success text-white"
								style="
								width: 50rpx;
								height: 100%;
								flex-direction:column;
								white-space:pre-wrap;
								position: absolute;
								left: 0;
								align-items: center;
								justify-content: center;
								border-radius: 14rpx 0 0 14rpx;
								"
								>溯源</view> -->
								<image v-if="row.Picture_URL != void 0" style="width: 120rpx; height: 120rpx"
									:src="Domain_IMG + row.Picture_URL" mode=""></image>
							</view>
						</template>
					</el-table-column>
					<el-table-column align="center" label="商品名称">
						<template v-slot="{ row }">
							<view class="w-100 text-ellipsis flex align-center justify-center"
								:title="row.Article_Name">
								<text>{{ row.Article_Name }}</text>
							</view>
						</template>
					</el-table-column>
					<el-table-column align="center" label="商品类型">
						<template v-slot="{ row }">
							<view class="w-100 text-ellipsis flex align-center justify-center"
								:title="row.Category_Name">
								<text>{{ row.Category_Name }}</text>
							</view>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="Total_Quantity" label="销售数量">
						<template v-slot="{ row }">
							<view class="w-100 text-ellipsis" :title="row.Total_Quantity + '/' + row.Unit">
								<text>{{ row.Total_Quantity + "/" + row.Unit }}</text>
							</view>
						</template>
					</el-table-column>
					<el-table-column align="center" label="所属企业">
						<template v-slot="{ row }">
							<view class="w-100 text-ellipsis" :title="row.Enterprise_Name">
								<text>{{ row.Enterprise_Name }}</text>
							</view>
						</template>
					</el-table-column>
					<el-table-column align="center" label="发布人">
						<template v-slot="{ row }">
							<view class="w-100 text-ellipsis" :title="row.Contacts">
								<text>{{ row.Contacts }}</text>
							</view>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="address" :label="''">
						<template v-slot="{ row }">
							<text :class="'text-' + ThemeColors">查看详情</text>
						</template>
					</el-table-column>
				</yTable>
				<view class="charts-box mt-5">
					<text class="title">近7天热门供应榜</text>
					<qiun-data-charts type="word" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>
		<!-- 移动端 -->
		<view v-else-if="screenWidth <= 480" class="mb-5 bg-grey">
			<view class="bg-white flex w-100 border-top border-grey" style="box-sizing: border-box; height: 80rpx">
				<view class="flex justify-center align-center border-right border-grey"
					style="position: relative; box-sizing: border-box; width: 50%">
					<text class="font">类别<i class="dropdown-arrow icon-triangle-down"></i></text>
				</view>
				<view class="flex justify-center align-center" style="position: relative; width: 50%">
					<text class="font">地区<i class="dropdown-arrow icon-triangle-down"></i></text>
				</view>
			</view>
			<!-- 列表 -->
			<view class="flex flex-column align-center my-2 pb-2" style="width: 100%">
				<view @click="handleDetail(item)" v-for="(item, index) in tableData" :key="index"
					class="flex mb-2 rounded-lg bg-white" style="width: 95%; height: 270rpx; position: relative">
					<view class="flex-shrink rounded-lg" style="height: 270rpx; width: 270rpx">
						<image class="rounded-lg" style="height: 270rpx; width: 270rpx"
							:src="Domain_IMG + item.Picture_URL" mode=""></image>
					</view>
					<view class="flex" style="width: 100%; height: 100%">
						<view class="flex flex-column justify-between m-2 w-100">
							<view style="height: 80rpx; width: 400rpx">
								<text class="font text-ellipsis-2">{{
                  item.Group_Purchasing_Name
                }}</text>
							</view>
							<view class="">
								<!-- <text class="font-sm px-1 border mr-1" :class="'text-'+ThemeColors+' border-'+ThemeColors">每周采购</text> -->
								<text class="font-sm px-1 border"
									:class="'text-' + ThemeColors + ' border-' + ThemeColors">认证</text>
							</view>
							<view style="position: relative">
								<text class="font"
									:class="'text-' + ThemeColors">{{ item.Amount }}元/{{ item.Unit }}</text>
								<text class="font-sm text-muted">成交{{ item.Sell_Quantity }}吨</text>
								<!-- <text class="font-sm text-muted" style="position: absolute;right: 0;bottom: 0;">8小时前</text> -->
							</view>
							<view class="">
								<text class="font-sm text-muted">所属企业：{{ item.Enterprise_Name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter Show v-if="screenWidth > 480" :screenWidth="screenWidth" :bg="'bg-white'"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	import yTable from "@/components/yTable.vue";
	import {
		getGroupSalesRanking
	} from "@/api/information.js";
	import {
		GroupProcureAll,
		GroupProcureAllAction
	} from "@/api/group.js";
	import {
		GoodsFileInquiry
	} from "@/api/global.js";
	import {
		Message
	} from "element-ui";
	export default {
		components: {
			yHeader,
			yFooter,
			yTable,
		},
		data() {
			return {
				bg_white: "bg-white",
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				Domain_IMG: app.globalData.Domain_IMG,
				Variety: 0,
				form: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				loading: true,
				total: 0,
				category: [{
					Category_SerialNumber: "",
					Category_Name: "全部",
				}, ],
				tableData: [],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['word'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: undefined,
					enableScroll: false,
					extra: {
						word: {
							type: "normal",
							autoColors: false,
						},
					},
				},
			};
		},
		onReady() {
			this.getServerData();
		},
		onLoad() {
			window.addEventListener("scroll", this.handleScroll);
			this.getData(this.form);
			this.getList();
		},
		methods: {
			async getServerData(data) {
				const res = await getGroupSalesRanking({
					data: {
						Type: "0",
					},
				})
				let arr = ['50','35','30','20','15','10']
				res.Data.forEach((item,i)=>{
					if(arr[i]==void 0){
						item.textSize = arr[arr.length-1]
					}else{
						item.textSize = arr[i]
					}
				})
				let res1 = {
					series: res.Data
				};
				console.log(res1)
				this.chartData = JSON.parse(JSON.stringify(res1));
			},
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			handleScroll() {
				const scrollTop =
					document.documentElement.scrollTop || document.body.scrollTop;
				// 获取页面的可视高度
				const clientHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				// 获取页面的总高度
				const scrollHeight =
					document.documentElement.scrollHeight || document.body.scrollHeight;
				// 判断是否滑动到底部
				if (scrollTop + clientHeight >= scrollHeight && this.screenWidth <= 480) {
					// 执行你想要执行的函数
					if (this.total > this.tableData.length) {
						this.getData_m(this.form);
					}
				}
			},
			async getData(data) {
				//分页查询所有供应数据
				const res = await GroupProcureAllAction({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
					const res = await GroupProcureAll({
						data,
					});
					if (res.Status == "success") {
						this.tableData = res.tableData;
						this.total = Number(res.limit);
						this.loading = false;
					}
				} else if (res.Status == "success") {
					console.log(res.tableData)
					this.tableData = res.tableData;
					this.total = Number(res.limit);
					this.loading = false;
				}
			},
			async getData_m(data) {
				//分页查询所有供应数据
				this.form.page++;
				const res = await GroupProcureAllAction({
					data: this.form,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
					const res = await GroupProcureAll({
						data: this.form,
					});
					if (res.Status == "success") {
						this.tableData.push(...res.tableData);
					}
				} else if (res.Status == "success") {
					this.tableData.push(...res.tableData);
				}
			},
			async getList() {
				//类别
				const res = await GoodsFileInquiry({
					data: {
						Data: "category",
					},
				});
				this.category.push(...res);
			},
			SwitchVariety(i, Category_SerialNumber) {
				//切换品种
				if (this.form.Category_SerialNumber == Category_SerialNumber) {
					//重复点击不允许调接口
					return;
				}
				this.Variety = i;
				this.form.Category_SerialNumber = Category_SerialNumber;
				this.form.page = 1;
				this.getData(this.form);
			},
			pageval(e) {
				console.log(e);
				this.form.page = e;
				this.getData(this.form);
			},
			limitval(e) {
				this.form.page = 1;
				this.form.limit = e;
				this.getData(this.form);
			},
			handleDetail(row) {
				uni.navigateTo({
					url: `/pages/detail/supply-detail?id=${encodeURIComponent(
          row.Group_Purchasing_SerialNumber
        )}&enterprise=${encodeURIComponent(row.Enterprise_Info_SerialNumber)}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.cont {
		// height: calc(100vh - 252px);
		display: flex;
	}

	.charts-box {
		width: 600rpx;
		height: 1000rpx;
		border: 1px solid #f5f5f5;
		// height: 100%;

		text {
			display: inline-block;
			font-weight: bold;
			width: 100%;
			height: 96rpx;
			padding: 46rpx 0;
			display: flex;
			box-sizing: border-box;
			background-color: #f5f5f5;
			justify-content: center;
			align-items: center;
		}
	}

	.content {
		width: 2400rpx;
		height: 100%;
		margin: 0 auto;
	}

	.contentrow {
		border: 1px solid #ddd;
		border-top: 0;
	}

	.label-recommend {
		font-size: 28rpx;
		color: #45b035;
		padding-left: 40rpx;
		border-bottom: 1px dashed #efefef;
		line-height: 100rpx;
	}

	.sub-row {
		display: flex;
		padding-left: 20rpx;
		border-bottom: 1px dashed #efefef;
		font-size: 28rpx;
		letter-spacing: 0.7px;
		position: relative;
		height: 100rpx;
		overflow-y: hidden;
	}

	.sub {
		transition: all 0.5s;
		padding: 20rpx 0;
		margin: 10rpx 20rpx;
		line-height: 42rpx;
	}
</style>